<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shopcar</title>
    <link rel="stylesheet" href="../css/boostrap/bootstrap.css">
    <link rel="stylesheet" href="../css/mubao.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../css/shopcar.css">
</head>

<body>
    <!-- 顶部logo -->
    <div class="header">
        <div class="header_content ">
            <div class="row">
                <div class="logo col-sm-9">
                    <img src="../images/index/lg.png" alt="">
                </div>
                <div class="login col-sm-3 ">
                    <ul class="nav justify-content-end login_nav m-2">
                        <li class="nav-item">
                            <a class="nav-link active" href="login.html"><img src="../images/index/login.png" alt=""
                                    width="25px" height="25px"> 登录
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="register.html"><img src="../images/index/register.png" alt=""
                                    width="25px" height="25px">注册</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="shoppingcart.html"><img src="../images/index/car.png" width="25px"
                                    height="25px" alt=""></a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航条 -->
    <div class="kfm_nav">
        <div class="nav_content">
            <li>
                <ul><a href="index.html">首页</a></ul>
                <ul><a href="about.html">关于</a></ul>
                <ul><a href="FAQ.html">FAQ</a></ul>
                <ul><a href="aftersales.html">售后</a></ul>
                <ul><a href="contact.html">联系</a></ul>
            </li>
        </div>
    </div>
    <!-- 内容 -->

    <div class="box">
        <div class="box1">
            <div class="list">
                <div class="head row">
                    <div class="nav0">
                        <input type="checkbox" id="checkAll" onclick="checkALL()">
                    </div>
                    <div class="nav1">商品</div>
                    <div class="nav2">价格</div>
                    <div class="nav3">数量</div>
                    <div class="nav4">合计</div>
                </div>
                <div class="article1">
                    <div class="box3"><input type="checkbox" name="article" id="shopping"></div>
                    <a href="goods2.html">
                        <div class="box4"></div>
                    </a>
                    <div class="box5"><a href="goods4.html">高清原装保护膜</a></div>
                    <div class="box6">29.00</div>
                    <div class="box7">
                        <button type="button" class="buttonleft" onclick="min1()">- </button>
                        <div class="goods_num">1</div>
                        <button type="button" class="buttonright" onclick="change1()">+ </button>
                    </div>
                    <div class="box8">29.00</div>
                </div>
                <div class="article1">
                    <div class="box3"><input type="checkbox" name="article" id="shopping"></div>
                    <a href="goods5.html">
                        <div class="box4"></div>
                    </a>
                    <div class="box5"><a href="goods2.html">高清原装保护膜</a></div>
                    <div class="box6">29.00</div>
                    <div class="box7">
                        <button type="button" class="buttonleft" onclick="min2()">- </button>
                        <div class="goods_num">1</div>
                        <button type="button" class="buttonright" onclick="change2()">+ </button>
                    </div>
                    <div class="box8">29.00</div>
                </div>
                <div class="article2">
                    <div class="box3"><input type="checkbox" name="article" id="shopping"></div>
                    <a href="goods1.html">
                        <div class="box4"></div>
                    </a>
                    <div class="box5"><a href="goods3.html">高清原装保护膜</a></div>
                    <div class="box6">29.00</div>
                    <div class="box7">
                        <button type="button" class="buttonleft" onclick="min3()">- </button>
                        <div class="goods_num">1</div>
                        <button type="button" class="buttonright" onclick="change3()">+ </button>
                    </div>
                    <div class="box8">29.00</div>
                </div>
            </div>
        </div>
        <!-- 收銀台 -->
        <div class="box2">

            <div class="text1">购物车总计</div>
            <div class="text2">
                <div><span>购物车小计</span></div>
                <div>￥<div class="total" style="float: right;">177.00</div>
                </div>

            </div>
            <div class="text3">
                <div><span>运费</span></div>
                <div>免费送货</div>
            </div>
            <div class="text4">
                <div><span>订单总计</span></div>
                <div><div>￥<div class="total" style="float: right;">177.00</div></div></div>
            </div>
            <div class="button1">
                <input type="submit" class="submit1" value="前往收银台">
            </div>
            <div class="text1">优惠劵</div>
            <div class="button2">
                <input type="text" name="coupon_code" class="quan" id="quan" value="" placeholder="优惠券代码">
                <input type="submit" class="submit2" value="使用优惠劵">
            </div>
        </div>
    </div>
    <script>
        var box = document.getElementsByClassName("goods_num");
        var price = document.getElementsByClassName("box6");
        var total = document.getElementsByClassName("box8");
        var totalAll = document.getElementsByClassName("total");
        var a = parseInt(total[0].innerText);
        var b = parseInt(total[1].innerText);
        var c = parseInt(total[2].innerText);
        totalAll[0].innerText = a + b + c;
        totalAll[1].innerText = a + b + c;

        function change1() {
            if (box[0].innerText < 5) {
                box[0].innerText++;
                // grice[0].innerText = grice[0] * box[0]; 這是一個很典型的錯誤，記住！！！
                total[0].innerText = price[0].innerText * box[0].innerText;
                a = parseInt(total[0].innerText);
                totalAll[0].innerText = a + b + c;
                totalAll[1].innerText = a + b + c;
                // total[0].innerText=total[0].innerText.toFixed(2);
                // console.log(a);
                // totalAll[0].innerText = parseInt(totalAll[0].innerText);
                // console.log(totalAll[0].innerText);
            } else {
                alert("特价商品，限购5个！")
            }
        }

        function change2() {
            if (box[1].innerText < 5) {
                box[1].innerText++;
                total[1].innerText = price[1].innerText * box[1].innerText;
                b = parseInt(total[1].innerText);
                totalAll[0].innerText = a + b + c;
                totalAll[1].innerText = a + b + c;
            } else {
                alert("特价商品，限购5个！")
            }
        }

        function change3() {
            if (box[2].innerText < 5) {
                box[2].innerText++;
                total[2].innerText = price[2].innerText * box[2].innerText;
                c = parseInt(total[2].innerText);
                totalAll[0].innerText = a + b + c;
                totalAll[1].innerText = a + b + c;
            } else {
                alert("特价商品，限购5个！")
            }
        }

        function min1() {
            if (box[0].innerText > 1) {
                box[0].innerText--;
                total[0].innerText = price[0].innerText * box[0].innerText;
                a = parseInt(total[0].innerText);
                totalAll[0].innerText = a + b + c;
                totalAll[1].innerText = a + b + c;
            } else {
                alert("请至少添加1个商品！")
            }
        }

        function min2() {
            if (box[1].innerText > 1) {
                box[1].innerText--;
                total[1].innerText = price[1].innerText * box[1].innerText;
                b = parseInt(total[1].innerText);
                totalAll[0].innerText = a + b + c;
                totalAll[1].innerText = a + b + c;
            } else {
                alert("请至少添加1个商品！")
            }
        }

        function min3() {
            if (box[2].innerText > 1) {
                box[2].innerText--;
                total[2].innerText = price[2].innerText * box[2].innerText;
                c = parseInt(total[2].innerText);
                totalAll[0].innerText = a + b + c;
                totalAll[1].innerText = a + b + c;
            } else {
                alert("请至少添加1个商品！")
            }
        }
        // 購物車小計
        // totalAll[0].innerText=total[0].innerText+total[1].innerText+total[2].innerText;

        //checkbox 全选/取消全选
        function checkALL() {
            var checked = document.getElementById("checkAll").checked;
            var article = document.getElementsByName("article");
            if (checked) {
                for (var i = 0; i < article.length; i++) {
                    article[i].checked = true;
                }
            } else {
                for (var i = 0; i < article.length; i++) {
                    article[i].checked = false;
                }
            }
        }
    </script>
    <!-- 底部 -->
    <div class="footer ">
        <div class="footer_content ">
            <div class="footer_row row ">
                <div class="contact col-sm-4 ">
                    <h2>Contact</h2>
                    <p>地址：陕西省西安市未央区凤城十二路凯瑞D座</p>
                    <h2>+86 123 1234 1234</h2>
                    <p>邮箱：1300343646@qq.com</p>
                </div>
                <div class="links col-sm-3 ">
                    <h2>Quick Links</h2>
                    <p>常见问题</p>
                    <p>测评中心</p>
                    <p>保修政策</p>
                    <p>售后服务</p>
                    <p>关于我们</p>
                </div>
                <div class="product col-sm-2 ">
                    <h2>Products</h2>
                    <p>充电</p>
                    <p>手机</p>
                    <p>生活</p>
                    <p>配件</p>
                    <p>音乐</p>
                </div>
                <div class="feedback col-sm-3 ">
                    <h2>Feedback</h2>
                    <div class="commit row ">
                        <textarea name=" " id=" " cols="20 " rows="4 " class="col-sm-8 " required>内容</textarea>
                        <div class="col-sm-4 "><button>提交</button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>

</html>